<template>
  <div>
    <p class="pinformation" style="margin-top: 7px">搜索条件</p>
    <el-form label-width="100px" :model="queryParams" ref="queryRef">
      <el-row>
        <el-col :span="4">
          <el-form-item label="方案编号：" prop="projectCode">
            <el-input
              v-model="queryParams.projectCode"
              clearable
              maxlength="100"
              @keyup.enter="handeleQuery"
              placeholder="请输入方案编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="方案名称：" prop="projectName">
            <el-input
              v-model="queryParams.projectName"
              clearable
              maxlength="100"
              @keyup.enter="handeleQuery"
              placeholder="请输入方案名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="委托单位：" prop="wtCustomName">
            <el-input
              v-model="queryParams.wtCustomName"
              clearable
              maxlength="100"
              @keyup.enter="handeleQuery"
              placeholder="请输入委托单位"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="合同编号：" prop="contractCode">
            <el-input
              v-model="queryParams.contractCode"
              clearable
              maxlength="100"
              @keyup.enter="handeleQuery"
              placeholder="请输入合同编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同名称：" prop="contractName">
            <el-input
              v-model="queryParams.contractName"
              clearable
              maxlength="100"
              @keyup.enter="handeleQuery"
              placeholder="请输入合同名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="方案类型：" prop="contractType">
            <el-select clearable v-model="queryParams.contractType">
              <el-option
                v-for="dict in proxy.addListNoLimit(sys_contract_type)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="加急状态：" prop="degree">
            <el-select clearable v-model="queryParams.degree">
              <el-option
                v-for="dict in proxy.addListNoLimit(sys_degree)"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="委托单位：" prop="wtCustomName">
            <el-input
              v-model="queryParams.wtCustomName"
              clearable
              maxlength="100"
              @keyup.enter="handeleQuery"
              placeholder="请输入委托单位"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- ！ -->
        <el-col :span="5">
          <!-- planDate -->
          <el-form-item label="方案开始时间：">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              :clearable="false"
              :editable="false"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <!-- planDate -->
          <el-form-item label="方案要求完成时间：" label-width="130">
            <el-date-picker
              v-model="dateRange1"
              value-format="YYYY-MM-DD"
              type="daterange"
              :clearable="false"
              :editable="false"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-row justify="end">
            <el-button type="success" @click="handeleQuery">搜索</el-button>
            <el-button class="business resetBtn" @click="resetQuery"
              >重置</el-button
            >
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <p class="pinformation">方案列表</p>
      <p class="totalStyle">共 {{ total }} 条数据</p>
    </el-row>
    <el-table ref="mainTableRef" :data="projectList">
      <el-table-column
        type="selection"
        width="55"
        align="center"
        v-if="!props.step"
      />
      <el-table-column
        show-overflow-tooltip
        prop="projectCode"
        label="方案编号"
        align="center"
        width="100"
      />
      <el-table-column
        show-overflow-tooltip
        prop="projectName"
        label="方案名称"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="contractCode"
        label="合同编号"
        align="center"
        width="120"
      />
      <el-table-column
        show-overflow-tooltip
        prop="wtCustomName"
        label="委托单位"
        align="center"
        width="290"
      />
      <el-table-column
        show-overflow-tooltip
        prop="planDate"
        label="方案开始时间"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="requireDate"
        label="方案计划完成时间"
        align="center"
        width="140"
      />
      <el-table-column
        show-overflow-tooltip
        prop="requireDate"
        label="合同要求完成时间"
        align="center"
        width="140"
      />
      <el-table-column
        show-overflow-tooltip
        label="方案类型"
        align="center"
        width="140"
      >
        <template #default="scope">
          <dict-tag
            :options="sys_contract_type"
            :value="scope.row.contractType"
          />
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="紧急类型"
        align="center"
        width="85"
      >
        <template #default="scope">
          <dict-tag :options="sys_degree" :value="scope.row.degree" />
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop
        label="操作"
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-button
            link
            type="success"
            v-if="!props.step"
            @click="review(scope.row)"
            >数据分析</el-button
          >
          <!-- <el-button link type="success" icon="View" v-if="props.step" @click="mation(scope.row)">详情</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="handeleQuery"
    />
  </div>
</template>

<script setup>
import { getProjectContract } from "@/api/dataAnalysis/selectProject";
import useRouteView from "@/store/modules/routeView";
const routeViewStore = useRouteView();

const router = useRouter();

const { proxy } = getCurrentInstance();
const {  sys_degree, sys_project_step } = proxy.useDict(
  "sys_degree",
  "sys_project_step"
);
const {
  sys_contract_type,
} = proxy.useOrgDict(
  "sys_contract_type",
);
const projectList = ref([]);
const total = ref(0);
const dateRange = ref([]);
const dateRange1 = ref([]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    contractType: -1,
    degree: -1,
  },
});
const { queryParams, form } = toRefs(data);
const props = defineProps({
  step: {
    type: Number, //参数类型
  },
});
const emits = defineEmits(["projectId", "projectId2"]);

function handeleQuery() {
  queryParams.value.params = {};
  queryParams.value.params = {
    beginTime: dateRange.value[0],
    endTime: dateRange.value[1],
    beginTime1: dateRange1.value[0],
    endTime1: dateRange1.value[1],
  };
  getProjectContract(queryParams.value).then((res) => {
    projectList.value = res.rows;
    total.value = res.total;
  });
}

function review(row) {
  if (routeViewStore.routeView2) {
    proxy.$tab.closePage(routeViewStore.routeView2);
  }
  router.push({
    path: "/dataAnalysis/analysis",
    query: {
      projectId: row.projectId,
    },
  });
}
//   function mation(row) {
//     emits("projectId2", row.projectId);
//   }

function resetQuery() {
  proxy.resetForm("queryRef");
  dateRange.value = [];
  dateRange1.value = [];
  handeleQuery();
}

watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [{ tableName: "main", bottomHeight: 73 }];
    } else {
      heightParams.value = [{ tableName: "main", bottomHeight: 22 }];
    }
    getTableHeight();
  }
);

const heightParams = ref([{ tableName: "main", bottomHeight: 22 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}
onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
handeleQuery();
</script>

<style></style>
